<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="../../element/index.css" rel="stylesheet" />
		<script src="../../js/vue.js"></script>
		<script src="../../element/index.js"></script>
		<script src="../../js/axios.js"></script>
		<script src="../../js/gsaucommon.js"></script>
		<style>
			#app {
				width: 1200px;
				margin: 0px auto;
				padding: 0px;
				/* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) */
				/* border: 1px ; */
				box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
			}

			.el-input {
				width: 280px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.el-form label {
				/* 	display: inline-block;
				font-size: 20px;
				width: 280px; */
			}

			.el-input__inner {
				/* 			border: none;
				text-align: center; */

			}

			.d2 li {
				list-style: none;
			}

			.lyric-enter,
			.lyric-leave-to {
				opacity: 0;
				transform: translateY(10px);
			}

			.lyric-enter-to,
			.lyric-leave {
				opacity: 1;

			}

			.lyric-enter-active,
			.lyric-leave-active {
				transition: all 0.7s;
			}

			#fileList_ul {
				margin-top: -20px;
				padding: 0px;
				text-decoration: none;
			}

			#fileList_ul li {
				list-style: none;
				text-decoration: none;
				text-align: left;
				/* padding-left: 0px; */

			}

			#app_header {
				height: 80px;
				margin-bottom: 40px;
				border: 2px solid #F8F8FF;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="app_header" style=" position: sticky; z-index: 2; top: 0px; background-color: white;">
				<el-row>
					<el-col :span="4" style="padding-left: 80px;">
						<h3>详细信息</h3>
					</el-col>

					<el-col :span="16" style="margin-top: 20px;">
						<el-steps :active="active" finish-status="success">
							<el-step title="填报数据"></el-step>
							<el-step title="进行中"></el-step>
							<el-step title="流转完成"></el-step>
						</el-steps>
					</el-col>
					<el-col :span="4" style="text-align: right; padding-top: 15px; padding-right: 80px; ">
						<el-button @click="returnList()">
							返回
						</el-button>
					</el-col>
				</el-row>
			</div>

			<el-form ref="form" label-width="80px" style="margin-left: 80px;">
				<el-row style="margin-top: 30px;">
					<el-row>
						<el-col :span="16">
							<el-form-item label="竞赛名称:">
								<el-input v-model="zhidaojingsai.jingsaiName" readonly style="width: 100%;"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="填报人">
								<el-input v-model="zhidaojingsai.tianbaoName" readonly style="width: 120px;"></el-input>
							</el-form-item>
						</el-col>

					</el-row>



					<el-row>
						<el-col :span="12">
							<el-form-item label="组织单位:">
								<el-input v-model="zhidaojingsai.zuzhiDanWei" readonly style="width: 100%;"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="得分:">
								<el-input v-model="zhidaojingsai.deFen" style="width: 120px;"></el-input>
								<!-- 教材与专著，教改，科研项目，专利软著的删除此item -->
							</el-form-item>
						</el-col>
					</el-row>


					<el-row>
						<el-col :span="8">
							<el-form-item label="奖项等级">
								<el-input v-model="zhidaojingsai.huojiangDengji" readonly></el-input>
								<!-- 仅 发表论文、指导竞赛、获奖情况的（修改为“奖项级别”）保留-->
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="奖项级别">
								<el-input v-model="zhidaojingsai.huojiangJibie" readonly></el-input>
								<!-- 仅 发表论文、指导竞赛、获奖情况的（修改为“奖项级别”）保留-->
							</el-form-item>
						</el-col>
					</el-row>

					<el-row>
						<el-col :span="8">
							<el-form-item label="获奖时间:">
								<el-input v-model="zhidaojingsai.huojiangDate" readonly></el-input>
								<!-- 仅获奖情况的保留 -->
							</el-form-item>
						</el-col>

						<el-col :span="8">
							<el-form-item label="提交人:">
								<el-input v-model="zhidaojingsai.createBy" readonly></el-input>
								<!-- 仅获奖情况的保留 -->
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>

						<el-col :span="8">
							<el-form-item label="提交时间:">
								<el-input v-model="zhidaojingsai.createTime" readonly></el-input>
								<!-- 仅获奖情况的保留 -->
							</el-form-item>
						</el-col>

						<el-col :span="8">
							<el-form-item label="更新时间:">
								<el-input v-model="zhidaojingsai.updateTime" readonly></el-input>
								<!-- 仅获奖情况的保留 -->
							</el-form-item>
						</el-col>
					</el-row>


					<el-row>
						<el-col :span="8">
							<el-form-item label="负责人:">
								<el-input v-model="zhidaojingsai.manager" readonly></el-input>
								<!-- 仅获奖情况的保留 -->
							</el-form-item>
						</el-col>

						<el-col :span="8">
							<el-form-item label="当前状态:">
								<el-input v-model="zhidaojingsai.status" readonly></el-input>
								<!-- 仅获奖情况的保留 -->
							</el-form-item>
						</el-col>
					</el-row>


					<el-row>
						<el-col :span="24">
							<el-form-item label="认证材料:">
								<el-input type="button" v-model="pleaseClick" @click.native="showcont2()"></el-input>
							</el-form-item>
						</el-col>
					</el-row>


					<el-row>
						<el-col :span="8">
							<el-form-item v-show="show2" class="d2">
								<ul style="text-align: center;" id="fileList_ul">
									<li v-for="(item,index) in zhidaojingsai.fileList">
										<el-link type="info" :underline="false"
											:href="host+'files/'+item.fileFullPath" /><i class="el-icon-tickets"></i>
										{{item.fileName}}</el-link>
									</li>
								</ul>
							</el-form-item>
						</el-col>

					</el-row>

					<el-row>
						<el-col :span="24">
							<el-form-item label="审批流程:">
								<el-input type="button" v-model="pleaseClick" @click.native="showcont1"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row>
						<el-col :span="24">
							<el-collapse-transition>
								<div class="block" v-show="show" style="padding-left: 80px;">
									<el-timeline style="padding: 0px;">
										<el-timeline-item v-for="(item,index) in  zhidaojingsai.shenhes"
											style="text-align: left;">
											<el-card>
												<h4>修改了登记表</h4>
												<p>{{item.tijiaoName}}提交于: {{item.tijiaoTime}}</p>
												<p>提交备注为: {{item.tijiaoMemo}}
												</p>
												<p>{{item.tijiaoName}}审核于: {{item.shenHeTime}}</p>
												<p>审核结果为: {{item.shenHeResult}}</p>
												<p>审核意见为: {{item.memo}}</p>
											</el-card>
										</el-timeline-item>

									</el-timeline>
								</div>
							</el-collapse-transition>
						</el-col>
					</el-row>
					
					<el-row>
						<el-col :span="8">
							<el-form-item label="审核结果:" readonly>
								<el-switch style="display: block;margin-top: 10px;margin-left: 5px;" v-model="lastFlag"
									active-color="#13ce66" inactive-color="#ff4949"
									inactive-text="未通过" 
									active-text="通过"  
									disabled
									>
								</el-switch>
							</el-form-item>
						</el-col>
					</el-row>

				</el-row>
			</el-form>

		</div>
	</body>
</html>
<script>
	let vm = new Vue({
		el: "#app",
		data: {
			id: '',
			zhidaojingsai: '',
			activeName: 'second',
			input: "",
			show: false,
			show2: false,
			textarea: "需要补充材料",
			value: "",
			active:2,
			lastFlag: false,
			host: window.gsau,
			pleaseClick: "点击显示",
		},

		created() {

			this.id = sessionStorage.getItem("jingsai_show_id")
			console.log(this.id)
			this.findAll()

		},
		methods: {
			returnList() {
				window.location = "list.html"
			},
			showcont1: function() {
				this.show = !this.show;
			},
			showcont2: function() {
				console.log("fdfffffffffffff")
				this.show2 = !this.show2;
			},
			submit: function() {
				console.log(this.textarea)
				console.log(this.value2)
			},
			findAll() {
				axios.get(window.gsau + "zhidaojingsai/find/" + this.id).then((res) => {
					if (res.data.code == 40010){
						this.zhidaojingsai = res.data.data
						if(this.zhidaojingsai.status=="进行中"){
							this.active=2
							this.lastFlag=false
							
						}else{
							this.active=3
							this.lastFlag=true
						}
						
						
					}
						
					else {
						this.$message.error("系统异常,请稍后再试")
					}
				})
			}
			
		},

	})
</script>
